<template>
  <div class="box">
    <ul id="list">
      <li>
        <h2>活动列表</h2>
      </li>
      <li>
        <Form label-position="left" :label-width="120" inline>
          <FormItem label="活动状态">
            <Select style="width:200px;-left:0px;">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItem label="活动报名开始日期">
            <Col span="12">
            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>

          <FormItem label="活动报名结束日期">
            <Col span="12">
            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>

          <FormItem label="搜索关键字">
            <Input v-model="value" placeholder="关键字" style="width: 200px"></Input>
          </FormItem>

          <FormItem label="活动开始日期">
            <Col span="12">
            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>

          <FormItem label="活动结束日期">
            <Col span="12">
            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>

          <FormItem label="活动发布开始日期">
            <Col span="12">
            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>

          <FormItem label="活动排序">
            <Select style="width:200px;left:0px;">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItem >
            <Button type="primary" @click="handleSubmit('formValidate')">查询</Button>
            <Button type="primary" @click="handleReset('formValidate')" style="">清空筛选</Button>
            <Button type="primary" @click="handleReset('formValidate')" style="">添加活动</Button>
          </FormItem>
        </Form>
      </li>
      <li>
        
      </li>
    </ul>
  </div>
</template>
<script>


</script>
<style>
  .ivu-form-label-left .ivu-form-item-label {
    text-align: right;
  }

  .box {
    width: 100%;
    height: 900px;
    background: rgb(245, 242, 242);
  }

  #list li:nth-child(1) {
    height: 80px;
    background: #fff;
  }

  #list li:nth-child(1) h2 {
    color: rgb(62, 62, 170);
    font-size: 20px;
    padding: 25px;
    font-weight: 600;
  }

  #list li:nth-child(2) {
    width: 1100px;
    height: 200px;
  }

  #list li:nth-child(3) {
    height: 620px;
    background: rgb(238, 161, 161);
  }

</style>
